
<template>
  <div class="dadiv">
    <div class="topdiv">
      <div class="navlefthuikuan">
        <span class="">icon</span>
        <h3>回访管理</h3>
      </div>
      <div class="navrighthuikuan">
        <input type="text" placeholder="请输入客户名称/回款编号" />
        <el-button type="primary">搜索</el-button>
      </div>
      <div class="navmain">
        <el-button type="warning" @click="newhuikuan = true"
          ><i>+</i> 新建访款</el-button
        >
        <!-- 表单验证 -->
        <el-dialog title="新建回访" :visible.sync="newhuikuan">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div class="leftnewhuifang">
              <el-form-item label="回款编号" prop="id">
                <el-input
                  v-model="ruleForm.id"
                  placeholder="根据编号规则自动生成，支持手动输入"
                ></el-input>
              </el-form-item>
              <el-form-item class="block">
                <span class="demonstration">回访人</span>
                <el-cascader
                  :options="options"
                  :props="huifangren"
                  v-model="ruleForm.huifangren"
                  clearable
                >
                </el-cascader>
                <!-- <div class="">
                  <span> 已选择0项</span>
                  <a href="#" style="color: #2362fb">清空</a>
                </div> -->
              </el-form-item>
              <el-form-item label="客户名称" prop="kehuname">
                <el-input
                  v-model="ruleForm.kehuname"
                  placeholder="+添加"
                ></el-input>
              </el-form-item>
              <el-form-item label="合同编号" prop="contactnum">
                <el-input
                  v-model="ruleForm.contactnum"
                  placeholder="+添加"
                  disabled
                ></el-input>
              </el-form-item>
            </div>
            <div class="rightnewhuifang">
              <el-form-item label="回访时间" required>
                <el-col :span="11">
                  <el-form-item prop="date1">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="ruleForm.date1"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="回访形式" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择">
                  <el-option label="见面拜访" value="jianmian"></el-option>
                  <el-option label="电话" value="dianhua"></el-option>
                  <el-option label="短信" value="duanxin"></el-option>
                  <el-option label="邮件" value="youjian"></el-option>
                  <el-option label="微信" value="weixin"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="联系人" prop="contacts">
                <el-input
                  v-model="ruleForm.contacts"
                  placeholder="+添加"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="客户满意度" prop="satisfaction">
                <el-select v-model="ruleForm.satisfaction" placeholder="请选择">
                  <el-option label="很满意" value="best"></el-option>
                  <el-option label="满意" value="good"></el-option>
                  <el-option label="一般" value="yiban"></el-option>
                  <el-option label="不满意" value="bumanyi"></el-option>
                  <el-option label="很不满意" value="henbumanyi"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-form-item label="客户反馈" prop="feedback">
              <el-input type="textarea" v-model="ruleForm.feedback"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >保存</el-button
              >
              <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <!--弹出框  -->
        <el-popover
          style="padding: 0 15px"
          placement="bottom"
          width="200"
          trigger="click"
          content="导出"
          @click="daochu"
        >
          <el-button slot="reference" class="el-icon-more"></el-button>
        </el-popover>
      </div>
    </div>
    <!-- 场景 回款 高级筛选 -->
    <div class="centerdiv">
      <div class="changjin">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item>
            场景:<el-select
              v-model="form.user"
              placeholder="全部回访"
              style="padding: 10px"
            >
              <el-option label="我负责的回访"></el-option>
              <el-option label="下属负责的回访"></el-option>
              <el-option label="全部回访"></el-option>
              <el-option class="cjxj">
                <i class="el-icon-circle-plus"></i>
                <a href="#">新建场景</a>
              </el-option>
              <el-option label="" class="cjxj">
                <i class="el-icon-s-tools"></i>
                <a href="#">管理</a>
              </el-option>
            </el-select>
            <!-- 高级筛选 -->
            <el-button class="saixuan" @click="gaojisaixuan = true"
              ><i class="el-icon-s-data">高级筛选</i>
            </el-button>
            <!-- 对话框 高级赛选 -->
            <div>
              <el-dialog title="高级筛选" :visible.sync="gaojisaixuan">
                <el-form :model="gaojiform">
                  <el-form-item label="筛选条件">
                    <el-select
                      v-model="gaojiform.pay"
                      placeholder="请选择要筛选的字段名"
                    >
                      <el-option label="商机名称"></el-option>
                      <el-option label="商户状态"></el-option>
                      <el-option label="商机状态组"></el-option>
                      <el-option label="商机金额"></el-option>
                      <el-option label="预计成交日期"></el-option>
                      <el-option label="备注"></el-option>
                      <el-option label="创建人"></el-option>
                      <el-option label="更新时间"></el-option>
                      <el-option label="创建时间"></el-option>
                      <el-option label="负责人"></el-option>
                      <el-option label="最后跟进时间"></el-option>
                      <el-option label="相关团队"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-input
                      v-model="gaojiform.name"
                      autocomplete="off"
                      placeholder="多个条件；隔开"
                    >
                      <i class="el-icon-circle-close"></i
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div>
                  <input
                    type="text"
                    v-for="(item, i) of items"
                    v-model="items[i]"
                    :key="i"
                  />
                  <a href="#" style="color: #4f81fb" @click="addsaixuan"
                    >添加筛选条件</a
                  >
                </div>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="gaojisaixuan = false">取 消</el-button>
                  <el-button type="primary" @click="gaojisaixuan = false"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 表格渲染 -->
    <div class="tablecontent">
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="date" label="回访编号" sortable width="120">
        </el-table-column>
        <el-table-column prop="name" label="回访时间" sortable width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="回访人"
          sortable
          width="120"
          :formatter="formatter"
        >
        </el-table-column>
        <el-table-column
          prop="returndata"
          label="回访形式"
          sortable
          width="120"
        >
        </el-table-column
        ><el-table-column
          prop="returnstyle"
          label="客户名称"
          sortable
          width="120"
        >
        </el-table-column
        ><el-table-column
          prop="returnmoney"
          label="联系人"
          sortable
          width="120"
        >
        </el-table-column
        ><el-table-column prop="periods" label="合同编号" sortable width="120">
        </el-table-column>
        <el-table-column prop="periods" label="客户满意度" sortable width="120">
        </el-table-column
        ><el-table-column prop="periods" label="客户反馈" sortable width="120">
        </el-table-column>
        <el-table-column prop="periods" label="创建人" sortable width="120">
        </el-table-column>
        <el-table-column prop="periods" label="更新时间" sortable width="120">
        </el-table-column
        ><el-table-column prop="periods" label="创建时间" sortable width="120">
        </el-table-column
        >
       <el-table-column prop="periods" label="所属部门" sortable width="120">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      tableData: [{}],
      items: {},
      form: {
        user: "",
      },
      gaojiform: {
        name: "",
        pay: "",
      },
      //   回访人
      props: { multiple: true },
      options: [
        {
          value: 1,
          label: "东南",
        },
        {
          value: 2,
          label: "西北",
        },
      ],
      ruleForm: {
        id: "",
        date1: "",
        num: "",
        region: "",
        huifangren: "",
        kehuname: "",
        contacts: "",
        contactsnum: "",
        satisfaction: "",
        feedback: "",
      },
      rules: {
        id: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 50, message: "", trigger: "blur" },
        ],
        huifangren: [{ required: true, message: "回访人", trigger: "blur" }],
        kehuname: [{ required: true, message: "客户名称", trigger: "change" }],
        contactnum: [{ required: true, message: "合同编号", trigger: "blur" }],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
      },
      multipleSelection: [], //获取的表格数据
      gaojisaixuan: false,
      newhuikuan: false,
    };
  },
  created() {},
  methods: {
    formatter(row, column) {
      return row.address;
    },
    // 切换第二行第三行选中状态
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 新建回款
    // newhuikuan() {
    //   this.ruleForm = true;
    // },
    // 给添加筛选条件 添加一个input框
    addsaixuan() {
      this.items.push("");
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("添加成功");
        } else {
          console.log("添加失败");
          return false;
        }
      });
    },
    // 取消表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 导出
    daochu() {},
  },
};
</script>
<style  scoped lang='less'>
.dadiv {
  width: 100%;
  height: 100%;
}
.topdiv {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.navrighthuikuan > input {
  height: 35px;
  border-radius: 5px;
  border: 1px solid #e8e9e9;
}
.cjxj > a {
  color: #2362fb;
  padding: 5px;
}
.cjxj > i {
  color: #2362fb;
}
.saixuan {
  background-color: #2362fb;
  color: #fff;
  border: none;
}
.changjin {
  height: 10vh;
  background-color: #fff;
  display: flex;
  justify-content: start;
}
</style>
